<template>
  <div id="searchPicturePage">
    <h2 style="margin-bottom: 16px">以图搜图</h2>
    <h3 style="margin: 16px 0">原图</h3>

    <!-- 原图加载骨架屏 -->
    <a-card style="width: 240px" :loading="pictureLoading">
      <template #cover v-if="!pictureLoading">
        <img
          style="height: 180px; object-fit: cover"
          :alt="picture.name"
          :src="picture.url ?? picture.url"
        />
      </template>
    </a-card>

    <div style="display: flex; align-items: center; margin: 16px 0">
      <h3 style="margin: 0">识图结果</h3>
      <a-spin v-if="searchLoading" size="small" style="margin-left: 12px" />
    </div>

    <!-- 搜索结果区域 -->
    <div v-if="searchLoading" class="loading-container">
      <!-- 加载动画和提示文字 -->
      <div class="loading-content">
        <a-spin size="large" />
        <p class="loading-text">正在为您搜索相似图片...</p>
      </div>

      <!-- 骨架屏网格 -->
      <a-list
        :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
        :data-source="Array(12).fill({})"
      >
        <template #renderItem>
          <a-list-item style="padding: 0">
            <a-card>
              <template #cover>
                <a-skeleton-image style="width: 100%; height: 180px" />
              </template>
              <a-skeleton :loading="true" :paragraph="{ rows: 1 }" />
            </a-card>
          </a-list-item>
        </template>
      </a-list>
    </div>

    <!-- 搜索结果列表 -->
    <div v-else-if="!searchLoading && dataList.length > 0">
      <a-list
        :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
        :data-source="dataList"
      >
        <template #renderItem="{ item }">
          <a-list-item style="padding: 0" class="fade-in-item">
            <a :href="item.fromUrl" target="_blank">
              <a-card hoverable>
                <template #cover>
                  <img
                    style="height: 180px; object-fit: cover"
                    :src="item.thumbUrl"
                    :alt="item.title || 'Similar image'"
                  />
                </template>
                <template #actions v-if="item.title">
                  <span style="font-size: 12px; color: #666;">{{ item.title }}</span>
                </template>
              </a-card>
            </a>
          </a-list-item>
        </template>
      </a-list>
    </div>

    <!-- 无结果状态 -->
    <div v-else-if="!searchLoading && dataList.length === 0" class="empty-state">
      <a-empty description="未找到相似图片">
        <template #image>
          <a-icon type="picture" style="font-size: 48px; color: #ccc;" />
        </template>
      </a-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getPictureVoByIdUsingGet, searchPictureByPictureUsingPost } from '@/api/pictureController'
import { message } from 'ant-design-vue'

const route = useRoute()

// 图片 id
const pictureId = computed(() => {
  return route.query?.pictureId
})

const picture = ref<API.PictureVO>({})
const pictureLoading = ref(false)
const searchLoading = ref(false)

// 获取老数据
const getOldPicture = async () => {
  pictureLoading.value = true
  try {
    // 获取数据
    const id = route.query?.pictureId
    if (id) {
      const res = await getPictureVoByIdUsingGet({
        id: id,
      })
      if (res.data.code === 0 && res.data.data) {
        const data = res.data.data
        picture.value = data
      }
    }
  } catch (error) {
    message.error('获取原图失败')
  } finally {
    pictureLoading.value = false
  }
}

const dataList = ref<API.ImageSearchResult[]>([])

// 获取搜图结果
const fetchData = async () => {
  searchLoading.value = true
  try {
    const res = await searchPictureByPictureUsingPost({
      pictureId: pictureId.value,
    })
    if (res.data.code === 0 && res.data.data) {
      dataList.value = res.data.data ?? []
      // 添加结果展示动画延迟
      setTimeout(() => {
        searchLoading.value = false
      }, 500)
    } else {
      message.error('获取数据失败，' + res.data.message)
      searchLoading.value = false
    }
  } catch (error) {
    message.error('搜索失败，请稍后重试')
    searchLoading.value = false
  }
}

// 页面加载时请求一次
onMounted(() => {
  getOldPicture()
  fetchData()
})
</script>

<style scoped>
.loading-container {
  position: relative;
  min-height: 400px;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

.loading-text {
  margin-top: 16px;
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.fade-in-item {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-state {
  padding: 60px 0;
  text-align: center;
}

/* 为卡片添加悬停效果 */
:deep(.ant-card) {
  transition: all 0.3s ease;
  border-radius: 8px;
}

:deep(.ant-card:hover) {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 骨架屏样式优化 */
:deep(.ant-skeleton-image) {
  border-radius: 8px 8px 0 0;
}
</style>
